<template>
	<view class="page">
		<!-- 下拉刷新 -->
		<scroll-view
			class="scroll-container"
			scroll-y
			:refresher-enabled="true"
			:refresher-triggered="isRefreshing"
			@refresherrefresh="onRefresh"
		>
			<!-- 用户头部信息 -->
			<view class="section user-header-section">
				<user-header :user-info="userInfo"></user-header>
			</view>

			<!-- 订单状态卡片 -->
			<view class="section order-section">
				<order-status></order-status>
			</view>

			<!-- 广告轮播 -->
			<view class="section banner-section" v-if="adBanners.length > 0">
				<ad-banner :banners="adBanners" @bannerClick="onBannerClick"></ad-banner>
			</view>

			<!-- 推荐服务区 -->
			<view class="section recommend-section" v-if="recommendServices.length > 0">
				<recommend-services
					:services="recommendServices"
					@itemClick="onServiceClick"
				></recommend-services>
			</view>

			<!-- 快捷工具区 -->
			<view class="section tools-section">
				<tool-list></tool-list>
			</view>

			<!-- 最近活动记录 -->
			<view class="section activity-section" v-if="userActivities.length > 0">
				<user-activity
					:activityList="userActivities"
					@itemClick="onActivityClick"
				></user-activity>
			</view>
		</scroll-view>
	</view>
</template>

<script setup>
	import { ref, onMounted } from 'vue';
	import { onLoad, onShow, onPullDownRefresh } from "@dcloudio/uni-app";

	// 导入组件
	import UserHeader from './components/UserHeader.vue'
	import OrderStatus from './components/OrderStatus.vue'
	import ToolList from './components/ToolList.vue'
	import RecommendServices from './components/RecommendServices.vue'
	import AdBanner from './components/AdBanner.vue'
	import UserActivity from './components/UserActivity.vue'

	// 导入数据服务
	import {
		getUserInfo,
		getRecommendServices,
		getMenuList,
		defaultRecommendServices
	} from './UserDataService.js'

	// 数据定义
	const userInfo = ref({})
	const recommendServices = ref([])
	const isRefreshing = ref(false)

	// 广告数据
	const adBanners = ref([
		{
			icon: 'promotion',
			title: '限时优惠',
			description: '全场美食8折起',
			url: '/pages/promotion/food',
			bgColor: '#FFF5F2'
		},
		{
			icon: 'member',
			title: '会员专享',
			description: '新人首单立减10元',
			url: '/pages/membership/new',
			bgColor: '#FFF8E1'
		},
		{
			icon: 'delivery',
			title: '免费配送',
			description: '会员专享特权',
			url: '/pages/delivery/free',
			bgColor: '#E3F2FD'
		}
	])

	// 用户活动数据
	const userActivities = ref([
		{
			id: 1,
			type: 'order',
			title: '订单已完成',
			description: '下午茶套餐 x 2',
			time: Date.now() - 3600000, // 1小时前
			url: '/pages/order/detail?id=123456'
		},
		{
			id: 2,
			type: 'coupon',
			title: '优惠券已到账',
			description: '满100减20元',
			time: Date.now() - 86400000, // 1天前
			url: '/pages/user/coupon'
		},
		{
			id: 3,
			type: 'payment',
			title: '支付成功',
			description: '¥39.8',
			time: Date.now() - 259200000, // 3天前
			url: '/pages/order/detail?id=123455'
		}
	])

	// 页面加载和显示逻辑
	onShow(() => {
		// 获取用户信息
		loadUserInfo()
	})

	onLoad(() => {
		// 加载推荐服务
		loadRecommendServices()
		// 加载菜单列表
		loadMenuList()
	})

	// 加载用户信息
	const loadUserInfo = () => {
		getUserInfo({
			success: (res) => {
				if (res && res.data) {
					userInfo.value = res.data
				}
			}
		})
	}

	// 加载推荐服务
	const loadRecommendServices = () => {
		getRecommendServices({
			success: (res) => {
				if (res && res.data && res.data.length > 0) {
					recommendServices.value = res.data
				} else {
					// 如果API没有返回数据或者返回空数组，使用默认数据
					recommendServices.value = defaultRecommendServices
				}
			},
			fail: () => {
				// API请求失败时使用默认数据
				recommendServices.value = defaultRecommendServices
			}
		})
	}

	// 加载菜单列表
	const loadMenuList = () => {
		getMenuList()
	}

	// 下拉刷新
	const onRefresh = () => {
		isRefreshing.value = true

		Promise.all([
			new Promise(resolve => {
				loadUserInfo()
				resolve()
			}),
			new Promise(resolve => {
				loadRecommendServices()
				resolve()
			})
		]).then(() => {
			setTimeout(() => {
				isRefreshing.value = false
			}, 500)
		})
	}

	// 点击推荐服务项
	const onServiceClick = (item) => {
		navigateTo(item.url)
	}

	// 点击广告横幅
	const onBannerClick = (item) => {
		navigateTo(item.url)
	}

	// 点击活动记录
	const onActivityClick = (item) => {
		navigateTo(item.url)
	}

	// 页面跳转
	const navigateTo = (url) => {
		if (!url) return
		uni.navigateTo({ url })
	}
</script>

<style lang="scss">
	.page {
		width: 100vw;
		height: 100vh;
		background: #f7f8fa;
	}

	.scroll-container {
		width: 100%;
		height: 100%;
	}

	.section {
		margin: 0 20rpx 24rpx;

		&:first-child {
			margin-top: 20rpx;
		}

		&:last-child {
			margin-bottom: 40rpx;
		}
	}

	.user-header-section, .order-section, .recommend-section, .tools-section, .activity-section {
		border-radius: 16rpx;
		overflow: hidden;
	}

	.banner-section {
		margin-top: 24rpx;
	}
</style>
